<template>
	<view class="container" style="">
		<view class="head">
			<u-search style="width: 644rpx;" :inputStyle="{'width':'322rpx'}" placeholder="搜索" height="32"
				:showAction="false" v-model="keyword"></u-search>
			<u-tabs class="tabss" :list="list1" lineWidth="30" lineColor="rgba(81, 99, 217, 1)"
				@click="click"></u-tabs>
		</view>
		<image style="height: 380rpx; width: 100%;position: absolute;top: 0;z-index: -1;" src="../../static/shopback.png" mode=""></image>
		<view class="medical" v-if="current == 0">
			<u-grid style="margin-top: 250rpx;" col="5" :border="false" @click="gridClick">
				<u-grid-item v-for="(baseListItem,baseListIndex) in baseList" :key="baseListIndex">
					<image style="width: 90rpx;height: 90rpx;" :src="baseListItem.imgUrl" mode=""></image>
					<text class="grid-text">{{baseListItem.title}}</text>
				</u-grid-item>
			</u-grid>
			<scroll-view scroll-y="true" style="max-height: 700rpx;">
				<view class="yuyue" v-for="(item,index) in yuyuelist" :key="index">
					<image style="width: 750rpx;height: 230rpx;" :src="item.url"  />
				</view>
			</scroll-view>
		</view>
		<view class="shop" v-if="current == 1">
			商城购物
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				list1: [{
					name: '医疗服务',
				}, {
					name: '商城购物',
				}],
				current: 0,
				imageurl: '../../static/shopback.png',
				baseList: [{
						imgUrl: '../../static/peizhen.png',
						title: '陪诊'
					},
					{
						imgUrl: '../../static/jiayi.png',
						title: '家医'
					},
					{
						imgUrl: '../../static/lvtong.png',
						title: '绿通'
					},
					{
						imgUrl: '../../static/yanglao.png',
						title: '养老'
					},
					{
						imgUrl: '../../static/shangmen.png',
						title: '上门'
					},
				],
				yuyuelist: [
					{
						url: '../../static/shili1.png'
					},
					{
						url: '../../static/shili2.png'
					},
					{
						url: '../../static/shili3.png'
					}
				]
			}
		},
		methods: {
			click(item) {
				this.current = item.index
				console.log('item', item);
			},
			gridClick(name) {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		font-size: 28rpx;
		line-height: 48rpx;

		.head {
			padding: 5%;
			height: 340rpx;
			/* 设置你需要的高度 */
			width: 90%;
			/* 设置你需要的宽度 */
			::v-deep.u-tabs {
				margin-left: 170rpx;
				.u-tabs__wrapper__nav {
					// justify-content: center;
				}
			}
		}
		.medical {
			margin-top: 0rpx;
		}
	}

	.grid-text {
		font-size: 26rpx;
		font-weight: 700;
		color: rgba(51, 51, 51, 1);
	}
</style>